function  makeMatrixData(){

}
function drawNewmatrix(data){
     const chart = new Chart();
     const config = {
        pointColor: chart._colors[0],
        margins: {top: 10, left: 10, bottom: 10, right: 10},
        textColor: 'black',
        gridColor: 'gray',
        title: '散点图',
        pointSize: 5,
        hoverColor: 'white',
        animateDuration: 1000
    };
    chart.width(200);
    chart.height(150);
    chart.margins(config.margins);



    chart.render = function(){
        // chart.renderinit();
        // chart.drawscatter();
       // set the dimensions and margins of the graph

        const margin = {top: 10, right: 15, bottom: 15, left: 15},
          width = 300 - margin.left - margin.right,
          height = 170 - margin.top - margin.bottom;

        // append the svg object to the body of the page
        const svg = d3.select("#matrix")
        .append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform", `translate(${margin.left},${margin.top})`);

        // Labels of row and columns
        const myGroups = ["A", "B"]
        const myVars = ["A", "B"]

        // Build X scales and axis:
        const x = d3.scaleBand()
          .range([ 0, width ])
          .domain(myGroups)
          .padding(0.01);
        svg.append("g")
          .attr("transform", `translate(0, ${height})`)
          .call(d3.axisBottom(x))

        // Build X scales and axis:
        const y = d3.scaleBand()
          .range([ height, 0 ])
          .domain(myVars)
          .padding(0.01);
        svg.append("g")
          .call(d3.axisLeft(y));

        // Build color scale
        const myColor = d3.scaleLinear()
          .range(["white", "#69b3a2"])
          .domain([1,100])

        //Read the data

        // create a tooltip
        const tooltip = d3.select("#matrix")
            .append("div")
            .style("opacity", 0)
            .attr("class", "tooltip")
            .style("background-color", "white")
            .style("border", "solid")
            .style("border-width", "2px")
            .style("border-radius", "5px")
            .style("padding", "5px")

        // Three function that change the tooltip when user hover / move / leave a cell
        const mouseover = function (event, d) {
            tooltip.style("opacity", 1)
        }
        const mousemove = function (event, d) {
            tooltip
                .html("The exact value of<br>this cell is: " + d.group + d.variable)
                .style("left", (event.x) / 2 + "px")
                .style("top", (event.y) / 2 + "px")
        }
        const mouseleave = function (d) {
            tooltip.style("opacity", 0)
        }

        // add the squares

        svg.selectAll()
            .data(data, function (d) {
                return d.group + ':' + d.variable;
            })
            .enter()
            .append("rect")
            .attr("x", function (d) {
                return x(d.group)
            })
            .attr("y", function (d) {
                return y(d.variable)
            })
            .attr("width", x.bandwidth())
            .attr("height", y.bandwidth())
            .style("fill", "#69b3a2")
            // .style("fill", function (d) {
            //     return myColor(d.value)
            // })
            .on("mouseover", mouseover)
            .on("mousemove", mousemove)
            .on("mouseleave", mouseleave)

    };
     //选择操作的div
    chart.box(d3.select("#matrixDiv"));
    chart.renderChart();

};
